<template>
  <div class="shoppingcart-main">
    <header>
      <i @click="goBack()"></i>
      <div>优惠券</div>
      <span @click='manageCart()'>{{manage}}</span>
    </header>
    <div class="sc-goods-list">
      <!-- <div class='mc' v-if="list.length<1">
                <img src="../../image/no_collection@2x.png" width='110' alt="">
                <p>还没有优惠券哦!</p>
            </div> -->
      <!-- <div class="sc-goods-list-one" v-for='(item,index) in list' :key="index">
        <label class="sc-goods-label" @change="select">
          <input type="checkbox" class="sc-goods-checkbox" v-model="gender" :value="item" />
          <span class="sc-normal"></span>
          <div class="sc-goods-cover">
            <img :src="item.img_url" />
          </div>
          <div class="sc-goods-name">

          </div>
          <div class="sc-goods-color">规格颜色：{{item.standard? (JSON.parse(item.standard).size +"+"+
            JSON.parse(item.standard).color):''}}</div><br />
          <div class="sc-goods-price-number">
            <span class="sc-goods-price">{{item.price}}</span>
            <span class="sc-goods-number">×{{item.num}}</span>
          </div>
        </label>
      </div> -->
      <div class="head">
          <span>赠送优惠券</span>
          <span>我的优惠券</span>
      </div>
    </div>
    <div class="sc-foot-gotopayfor" v-if="list.length>=1">
      <div class="sc-foot-left">
        <div @click="checkedall()">
          <span class="sc-all-normal" v-show="!isSelectAll"></span>
          <span class="sc-all-normal allchecked" v-show="isSelectAll"></span>
          <span class="sc-all-normal-title">全选</span>
        </div>
        <span class="sc-zongjia">{{totalPrice}}</span>
        <span class="sc-zongjia-title">合计:</span>
      </div>
      <div class="sc-foot-right" @click="balance">{{status}}</div>
    </div>
  </div>
</template>
<script>
  import {
    MessageBox,
    Loadmore
  } from 'mint-ui';
  export default {
    data() {
      return {
        userid: '',
        list: [],
        checked: 0,
        sentPage: {
          page: "1",
          rows: "10"
        }, //接口入参
        gender: [], //选择的商品
        isSelectAll: false,
        totalPrice: 0,
        status: '结算', //结算||删除
        manage: '管理', //管理or取消
      }
    },
    created() {
      this.getCartsData();
    },
    methods: {
      goBack() {
        this.$router.push({
          name: 'my'
        })
      },
      //管理购物车商品
      manageCart() {
        if (this.status == '结算') {
          this.status = '删除';
          this.manage = '取消';
        } else {
          this.status = '结算';
          this.manage = '管理';
        }
      },
      //获取购物车列表
      getCartsData() {
        this.userid = localStorage.getItem("loginMobile");
        // 第一个参数是root--baseurl
        this.$api.post(this.$api.baseURLSchool, "selecttype_view/view_goods_cart/0?uid=" + this.userid, this.sentPage,
          r => {
            console.log(r);
            this.list = r.data.rows;
          }, err => {
            console.log(err);
          })
      },
      //全选
      checkedall: function () {
        var _this = this;
        if (!this.isSelectAll) { //全选
          _this.gender = [];
          _this.totalPrice = 0;
          _this.list.forEach(function (item, index) {
            _this.gender.push(item);
            _this.totalPrice += (item.price * item.num);
          });
          _this.isSelectAll = true;
        } else { //反选
          _this.gender = [];
          _this.totalPrice = 0;
          _this.isSelectAll = false;
        }
        console.log(this.gender);
      },
      //多选框change事件
      select() {
        var _this = this;
        console.log(this.gender);
        this.totalPrice = 0;
        this.gender.forEach(function (item, index) {
          _this.totalPrice += (item.price * item.num);
        });
        if (this.gender.length < this.list.length) {
          this.isSelectAll = false;
        } else if (this.gender.length == this.list.length) {
          this.isSelectAll = true;
        }
      },
      //结算or删除购物车
      balance() {
        if (this.status == '结算') {
          if (this.gender.length) {
            this.$router.push({
              path: '/firmOrder',
              query: {
                cartsList: JSON.stringify(this.gender)
              }
            });
          } else {
            this.$utils._toast("请选择商品");
          }
        } else {
          if (this.gender.length) {
            console.log(this.gender);
            var that = this;
            MessageBox.confirm('确定删除这' + this.gender.length + '件商品?').then(action => {

              this.gender.forEach(function (item, index) {
                console.log(item.cid);
                const params = {
                  id: item.cid
                }
                that.$api.post(that.$api.baseURLSchool, "dataupdate/carts/del", params, r => {
                  if (r.data.ret == 1) { //删除成功 更新购物车表
                    that.getCartsData();
                  }
                }, err => {
                  console.log(err);
                })
              });
              this.status = '结算';
              this.totalPrice = 0;
              this.gender = [];
            }, r => {
              this.status = '删除';
            });

          } else {
            this.$utils._toast("请选择商品");
          }
        }

      }

    }
  }

</script>

<style lang="scss" scoped>
  .mc {
    padding: 40px 0;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);

    img {
      display: block;
      margin: 0 auto;
    }

    p {
      padding-top: 10px;
      text-align: center;
    }
  }

  .head{
      height: 0.72rem;
      background: #f9f9f9;
  }

</style>
